<template>
	<view>
		<view class="bg-white">
			<view class="d-flex flex-column top_con" >
				<view style="height: 170upx;padding-top:80upx;">
					<image src="../../static/img/boy.png" class="top_image"></image>
				</view>
				<view class="top_name">
					<text>{{staff.staffName}}</text>  <text style="margin-left:30upx;">{{ staff.phone }}</text>
				</view>
			</view>
			<view class="d-flex flex-column">
				<view class="d-flex flex-row flex-nowrap item_con" @click="gotoMoniGrade">
					<view class="item_icon">
						<image src="../../static/img/grade.png" class="item_icon_size"></image>
					</view>
					<view style="width: 600upx;">
						我的模拟成绩
					</view>
					<view class="item_arrow">
						<image src="../../static/icon/arrow_right.png" class="item_icon_size"></image>
					</view>
				</view>
				<view class="d-flex flex-row flex-nowrap item_con" @click="gotoMyCert">
					<view class="item_icon">
						<image src="../../static/img/cert.png" class="item_icon_size"></image>
					</view>
					<view style="width: 600upx;">
						个人证书查询
					</view>
					<view  class="item_arrow">
						<image src="../../static/icon/arrow_right.png" class="item_icon_size"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-column" style="position: absolute; bottom: 100upx;text-align: center;">
			<button class="logout_btn" @click="logout">退出登录</button>
		</view>
		
		<!-- 报名提示弹窗 -->
		<uni-popup ref="popup" background-color="#fff" before-close="true">
			<view class="popup-content" >
				<text>您尚未报名，请联系单位先报名考试</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staff: {}
			}
		},
		onLoad() {
			this.getUser()
		},
		onShow() {
			setTimeout(()=>{
				let apply = uni.getStorageSync("staff_apply")
				if(!apply){
					this.$refs.popup.open('center')
					return 
				}
			}, 500)
		},
		methods: {
			// 查询用户信息
			getUser(){
				let url = '/my/user'
				this.$H.post(url, {}, {token: true}).then(res=>{
					if(!res || res.code != 200){
						return uni.showToast({
							title: '获取数据失败'
						})
					}
					this.staff = res.result
					
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},
			
			gotoMyCert(){
				let apply = uni.getStorageSync("staff_apply")
				if(!apply){
					this.$refs.popup.open('center')
					return 
				}				
				uni.navigateTo({
					url: "/pages/my/cert"
				})
			},
			
			gotoMoniGrade(){
				let apply = uni.getStorageSync("staff_apply")
				if(!apply){
					this.$refs.popup.open('center')
					return 
				}
				uni.navigateTo({
					url: "/pages/moni/mymoni"
				})
			},
			
			logout(){
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/pages/login"
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #f1f1f1;
	}
	
	.item_con{
		line-height: 100upx;border-bottom: 1px solid #f2f2f2;font-size: 28upx; margin-left:20upx;
	}
	
	.top_con{
		width: 750upx;height: 350upx;text-align: center;
		background-image: url();
	}
	
	.top_con_h5{
		width: 750upx;height: 350upx;text-align: center;
		background-image: url( '../../static/img/girl.png');
	}
	
	.logout_btn{
		height:80upx;line-height: 80upx; border-radius:40upx;color:#ffffff;background-color: #2878ff;font-size:24upx;
		width: 710upx;margin-left:20upx;
	}
	
	.item_icon{
		width: 80upx;line-height:80upx;padding-top:25upx;
	}
	
	.item_arrow{
		width: 70upx;line-height: 80upx;padding-top:25upx;
	}
	
	.top_image{
		width: 120upx;height: 120upx;border-radius: 60upx;
	}
	
	.top_name{
		font-size: 30upx;color:#ffffff;font-weight: bold;
	}
	
	.item_icon_size{
		width: 40upx;height: 40upx;
	}
</style>
